<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{template.eventName}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="http://localhost:8000/static/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
    </style>
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">

	<!--  Author: Nermeen Hashem
	The following code will load and initialize the JavaScript SDK with all common options for facebook.
	it provides a mechanism for rendering of the XFBML versions of facebook Social Plugins,
	The best place to put this code is right after the opening <body> tag.-->
	<div id="fb-root"></div>
	<!--The JavaScript SDK requires the fb-root element in order to load properly 
	and a call to FB.init to initialize the SDK with my app ID correctly.-->
	<script>
	  window.fbAsyncInit = function() {
	    FB.init({
	      appId      : '356259251095212', // my App id
	      status     : true, // check facebook login status
	      cookie     : true, // enable cookies to allow the server to access the session
	      xfbml      : true  // parse XFBML
	    });


	  };
	// Load the SDK Asynchronously
	  (function(d){
	     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
	     if (d.getElementById(id)) {return;}
	     js = d.createElement('script'); js.id = id; js.async = true;
	     js.src = "//connect.facebook.net/en_US/all.js";
	     ref.parentNode.insertBefore(js, ref);
	   }(document));
	</script>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript">
	<!-- Author: Dalia Hosny C5-07 -->
	<!-- The following code validates the search engine fields (search by and textbox so as for the user not to enter empty fields-->
	$(document).ready(function(){
	$('#searchEngineForm').validate();
	});
	<!-- Author: Dalia Hosny C5-07 -->
	<!-- The next code is a function that works when the search method is used, when the user types something in the third field this function calls the method auto
	Search which in return retrieves data from the database and shows it in the form of real-time data in the box of the search box -->

	$(document).ready(function(){
	     $( "input#autocompleteSearch" ).autocomplete({
	                            source: "{% url autoCompleteSearch %}",
	                            minLength: 1,
	                            autoFocus: true

	        });
	});
	</script>
	
	<!-- Author: Hadeel Mohamed
	This part of code is in javaScript and it does the following functionality, the method toggleVisibility
	Checks the Id of the element if its equal to the the "Hypertext Reference" clicked Id it shows that component 
	and it hides all the other ones and that part is mainly meant for example if Creator clicked on a specific 
	component to show it while there is another one is already shown the first 
	one will get hidden and the last clicked will replace it and thats applies to all the other 
	toggleVisibilities methods in the file-->  
<script type="text/javascript">
	  function toggleVisibility(){
		    if(document.getElementById("basic").style.display == "none" ) {
		    
		            document.getElementById("basic").style.display='block';
		            document.getElementById("loc").style.display='none';
		            document.getElementById("med").style.display='none';
		            document.getElementById("pay").style.display='none';
		            document.getElementById("agenda").style.display='none';
		            document.getElementById("liveS").style.display='none';
		            document.getElementById("sm").style.display='none';
		            
		        }
		    else  {
		                document.getElementById("basic").style.display='none';
		    
		          }
		        }
	  </script>
	  <script type="text/javascript">
     function toggleVisibility1(){
    if(document.getElementById("loc").style.display == "none" ) {
    
            document.getElementById("loc").style.display='block';
            document.getElementById("basic").style.display='none';
            document.getElementById("med").style.display='none';
            document.getElementById("pay").style.display='none';
            document.getElementById("agenda").style.display='none';
            document.getElementById("liveS").style.display='none';
            document.getElementById("sm").style.display='none';
            
        
        }
    else  {
                document.getElementById("loc").style.display='none';
    
          }
        }
		
	
    
    </script>
    
	    
	      <script type="text/javascript">
     function toggleVisibility2(){
    if(document.getElementById("med").style.display == "none" ) {
    

            document.getElementById("med").style.display='block';
            document.getElementById("loc").style.display='none';
            document.getElementById("basic").style.display='none';
            document.getElementById("pay").style.display='none';
            document.getElementById("agenda").style.display='none';
            document.getElementById("liveS").style.display='none';
            document.getElementById("sm").style.display='none';
            
        
        }
    else  {
                document.getElementById("med").style.display='none';
    
          }
        }
    </script>
    

	   <script type="text/javascript">
     function toggleVisibility3(){
    if(document.getElementById("agenda").style.display == "none" ) {
    
            document.getElementById("agenda").style.display='block';
            document.getElementById("loc").style.display='none';
            document.getElementById("med").style.display='none';
            document.getElementById("pay").style.display='none';
            document.getElementById("basic").style.display='none';
            document.getElementById("liveS").style.display='none';
            document.getElementById("sm").style.display='none';
            
        
        }
    else  {
                document.getElementById("agenda").style.display='none';
    
          }
        }
    </script>
    

	      <script type="text/javascript">
         function toggleVisibility4(){
        if(document.getElementById("pay").style.display == "none" ) {
    
            document.getElementById("pay").style.display='block';
            document.getElementById("loc").style.display='none';
            document.getElementById("med").style.display='none';
            document.getElementById("basic").style.display='none';
            document.getElementById("agenda").style.display='none';
            document.getElementById("liveS").style.display='none';
            document.getElementById("sm").style.display='none';
            
        
        }
    else  {
                document.getElementById("pay").style.display='none';
    
          }
        }
    </script>

	     <script type="text/javascript">
     function toggleVisibility5(){
    if(document.getElementById("liveS").style.display == "none" ) {
    
            document.getElementById("liveS").style.display='block';
            document.getElementById("loc").style.display='none';
            document.getElementById("med").style.display='none';
            document.getElementById("pay").style.display='none';
            document.getElementById("agenda").style.display='none';
            document.getElementById("basic").style.display='none';
            document.getElementById("sm").style.display='none'; 
        }
        
    else  {
                document.getElementById("liveS").style.display='none';
    
          }
        }
    </script>
    
	     <script type="text/javascript">
     function toggleVisibility6(){
    if(document.getElementById("sm").style.display == "none" ) {
    
            document.getElementById("sm").style.display='block';
            document.getElementById("loc").style.display='none';
            document.getElementById("med").style.display='none';
            document.getElementById("pay").style.display='none';
            document.getElementById("agenda").style.display='none';
            document.getElementById("liveS").style.display='none';
            document.getElementById("basic").style.display='none';
            
        
        }
    else  {
                document.getElementById("sm").style.display='none';
    
          }
        }
    </script>
	
  </head>

  <body>

   <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <ul class="nav">

          <a class="brand" href="/homePage/">Eventati</a>
          <li><a href ="/DashboardHome/">Home Page</a></li>      
          <li > <a href="/AboutUs/">About Us</a></li>
          <li><a href="/ViewInstructions/">Instructions</a></li>
          <li><a href  ="/Terms&Conditions/">  Terms & Conditions</a></li>
         <li><a href  ="/News/">  Latest News and Updates</a></li>
         <li><a href ="/Faqs/"> FAQS</a></li>
         <li><a href ="/Contactus/"> Contactus</a></li>
		<!-- Author: Amina Kadry This form is for logging the user out of his account -->
         <li><a href="/logout/" method="POST">Log out</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
 <h2><font color="BLUE"><p>{{inviter}}</p></font></h2>   
<h2><font color="GREEN"><p>{{attendingEventResponse}}</p></font></h2>
<h2><font color="GREEN"><p>{{maybeAttendingEventResponse}}</p></font></h2>
<h2><font color="GREEN"><p>{{notAttendingEventResponse}}</p></font></h2>
<h2><font color="RED"><p>{{notAuthorizedToRespond}}</p></font></h2>

      <div class="row-fluid">
        
        <div class="span8">
	
			<!-- Author: Dalia Hosny C5-07 -->
<!-- this code displays the search engine form in the Dash board home -->

<h2>Search your events here:</h2>
   <form id = "searchEngineForm" action="/searchEngine/" method="POST">
   {%csrf_token%}
    <select id = "drop-down-list" name="Categories" class="required">
    <option value="" selected="selected">Search by...</option>
      <option value="Name">Name</option>
      <option  value="Location">Location</option>
      <option  value="Tag">Tag</option>
      <option  value="Category">Category</option>
    </select>
    <input id = "autocompleteSearch" type="text" size="60" name="search" class="required" minlength="1">
    <input type="submit" value="Search now!" ><br>
    </form>
				<form action="/bookmark/" method = "POST">
					<br><input type="submit" value="Bookmarks"><br>	
					</form>
					
          <div class="hero-unit">
	
          	 <p> {{ alreadyAssigned}} </p>
			      <p> <font color = 'GREEN'> {{successAssigned}} </font></p>

 <!-- Author: Hadeel Mohamed
 The following code calls the method toggleVisiblity for each component in a form of 
 a "Hypertext Reference" which opens a box of the required information upon clicking on it-->
 
			   <a href="#" onclick="toggleVisibility('');">Basic Information</a>
&nbsp; &nbsp; &nbsp; 
{% for i in currentComponents%}
   {% if i|stringformat:"s" == "Location"%}
   <a href="#" onclick="toggleVisibility1('');">Location</a>
    {%endif%}
    {%endfor%}
&nbsp;&nbsp; 
{% for i in currentComponents%}
    {% if i|stringformat:"s" == "Media"%}
    <a href="#" onclick="toggleVisibility2('');">Media</a>
    {% endif %}
    {% endfor %}
&nbsp;&nbsp; 
{% for i in currentComponents%}
   {% if i|stringformat:"s" == "Agenda"%}
   <a href="#" onclick="toggleVisibility3('');">Agenda</a>
    {% endif %}
    {% endfor %}
&nbsp;
 {% for i in currentComponents%}
   {% if i|stringformat:"s" == "Payment"%}
   <a href="#" onclick="toggleVisibility4('');">Payment</a>
   {%endif%}
   {%endfor%}
&nbsp;
{% for i in currentComponents%}
   {% if i|stringformat:"s" == "Live Stream"%}
   <a href="#" onclick="toggleVisibility5('');">LiveStream</a>
    {% endif %}
    {% endfor %}
&nbsp;
{% for i in currentComponents%}
   {% if i|stringformat:"s" == "Social Marketing"%}
   <a href="#" onclick="toggleVisibility6('');">SocialMarketing</a>
   {% endif %}
   {% endfor %}
			   <br>
			   <br>
			   <!-- Author: Hadeel Mohamed
This code  puts all the basic information of any event in a box this box is initially hidden as well as
it appears in the center and the code also checks the type of 
the template if its one of the following ( Wedding, Birthday, Concert, Charity or Engagement ) it adds the 
suitable information that a creator of an event would like to add 
and there is also if conditions  to check if these optional fields are empty it would not add them to the chosen template
 -->
			 <div id="basic"  style = "display:none" align="left">
				 <h2> Event name: {{template.eventName}}</h2><br />
				  <h3> Start date: {{template.startDate}}</h3><br />
			      <h3> End date: {{template.endDate}}</h3><br />
			      <h3> Start time: {{template.startTime}}</h3><br />
			      <h3> End time: {{template.endTime}}</h3><br />

			       {% if template.name == "Create your own template" %}
			      <h3> Description </h3>
				  <pre>
			      {{event.template.description}}
				  </pre>

			      {% endif %}

			      {% if template.name == "Wedding" %}
			      {% if template.brideName == " " %}

			      {% else%}
			       <h3> Bride name is: {{template.brideName}}</h3><br />
			        {% endif %}
			      {% if template.groomName == "   " %}

			       {% else%}
			       <h3> Groom name is: {{template.groomName}}</h3><br />

			        {% endif %}
			        {% endif %}

			       {% if template.name == "Birthday" %}
			       {% if template.birthdayOwner == "   "%}

			       {% else%}
			       <h3> Birthday owner is: {{template.birthdayOwner}}</h3><br />
			       {% endif %}
			        {% endif %}

			       {% if template.name == "Concert" %}
			       {% if template.singerName == "   "%}
			       {% else%}
			       <h3> Singer name is: {{template.singerName}}</h3><br />
			       {% endif %}
			       {% endif %}

			       {% if template.name == "Charity" %}
			       {% if template.charityType == "   " %}
			       {%else%}   
			       <h3> Charity type is: {{template.charityType}}</h3><br />
			        {% endif %}
			        {% endif %}

			        {% if template.name == "Engagement" %}
			         {% if template.brideName == " " %}

			      {% else%}
			       <h3> Bride name is: {{template.brideName}}</h3><br />
			        {% endif %}
			      {% if template.groomName == "   " %}

			       {% else%}
			       <h3> Groom name is: {{template.groomName}}</h3><br />

			        {% endif %}
			        {% endif %}
			

			     </div>
			     
<!-- Author: Hadeel Mohamed
This code also makes a box for the location attributes like I have declared before how it works 
but here as well as the other components I check if the Creator chose Location component I display it else I do not 
show even the name Location and the same goes for the rest of other components-->

			     <!-- location --> 
			       <div id="loc"  style = "display:none" align="left">
			        {% for i in currentComponents%}
      {% if i|stringformat:"s" == "Location"%}
	<h3> Location name  : {{location.name}}</h3>
      <h3> Block Number : {{location.BlockNumber}}</h3>
      <h3> Street : {{location.Street}}</h3>
      <h3> City : {{location.city}}</h3>
      <h3> Country : {{location.Country}}</h3><br />

      <img src="http://maps.googleapis.com/maps/api/staticmap?center={{location.BlockNumber}}+{{location.Street}}+street,
{{location.city}},{{location.Country}}&zoom=16&size=512x512&maptype=roadmap&markers=color:red%7Ccolor:red%7Clabel:C%7C{{location.BlockNumber}}
+{{location.Street}}+street,{{location.city}},{{location.Country}}&sensor=false" />
          
         
 <br>
      {% endif %}
      {% endfor %}
       <br>
			     </div>
			     
			 <!-- media -->
			      <div id="med"  style = "display:none" align="left">

						 {% for i in currentComponents%}
					      {% if i|stringformat:"s" == "Agenda"%}
					       <h3> Planned activities : {{template.agenda.title }}</h3><br />
					<!-- Author: Reem Tarek
							This block conatins a table that displays all the activities the user had added to the event's agenda 
					--> 
					        <TABLE id="dataTable" width="350px" border="1">
					      	<tr>
								<th> Time</th>
								<th> Description</th>
							</tr>
							{% for A in activities %}
							<tr>

							<TD> <OUTPUT type = "time" name = "time" /> {{ A.startTime }} - {{  A.endTime }} </TD>
							<TD>  <OUTPUT type = "text" /> {{ A.description }} </TD>

							</tr>
							{% endfor %}
					    </TABLE>

					         
					      {% endif %}
					      {% endfor %}
		
	   

			     </div>

			   <!-- payment -->

			      <div id="pay"  style = "display:none" align="left">
			      	 {% for i in currentComponents%}
					  {% if i|stringformat:"s" == "Payment"%}
					  <h3> Payment amount : {{template.payment.paymentAmount}}</h3><br />
					  <h3> Payment deadline : {{template.payment.deadline}}</h3><br />

						<!--  Author : Hana Saoud 
						This part is an instruction for user and the event code is given -->

						<p> Please call the following number +1 415-599-2671 and enter the event code to pay.</p>
								<p> Event Code: {{eventId}} </p>

						{% endif %}
						{% endfor %}
						<br>
					<br>
			        </div>

			      <!--  Livestream  -->

				  <div id="liveS"  style = "display:none" align="left">
				 	 {% for i in currentComponents%}
					  {% if i|stringformat:"s" == "Live Stream"%}
				      <h3> LiveStream : {{event.template.liveStream.channel}}</h3><br />

					<!--  Author : Hana Saoud 
							The link is for viewing the channel and the iframe inside oembed tags is for embedding ustream.tv channel-->

						<a href = "/viewChannel/"> View Channel</a> <br />
				       {% load oembed_tags %}
						{% oembed %}
				       <iframe src="{{ event.template.liveStream.channel  }}" width="608" height="368" scrolling="no"></iframe> 
						{% endoembed %} 
					   {% endif %}
					   {% endfor %}
						<br>
						<br>
						
		<br>
			     </div>

			  <!--  Social Marketing -->

				  <div id="sm"  style = "display:none" align="left">
						  {% for i in currentComponents%}
					      {% if i|stringformat:"s" == "Social Marketing"%}
					                {% if template.socialMarketing.twitterUserName %}
					      			<h3> Twitter : {{template.socialMarketing.twitterUserName}}</h3><br />
					                      {% endif %}
					                      {% if template.socialMarketing.facebookUrl %}
					      			<h3> Facebook : {{template.socialMarketing.facebookUrl}}</h3><br />
						<!--  Author: Nermeen Hashem
						the following div calls the fb-root which is previously defined in the begging of the body
					    tag and another div to activate the facebook like button when the user presses the like button
					    the facebook url entered by the event creator will be liked and the data-send is set to true to
					    activate the facebook send button .when the user presses the send button
					    he will be able to send a message associated with the facebook url , show faces = "true" 
					    specifies whether to display profile photos below the button  and the width sepecifies
					    the width of the Like button. -->	
					      			<div id="fb-root"></div>
						<div class="fb-like" data-href={{template.socialMarketing.facebookUrl}} data-send="true" data-width="450" data-show-faces="true"></div>  
					                         {% endif %}
					                   {% if template.socialMarketing.hashTag %}
					      			<h3> HashTag: {{template.socialMarketing.hashTag}}</h3><br />
					      			         {% endif %}


					      {% endif %}
					      {% endfor %}
					       <br>
			     </div>

			      <br>
		
          </div>
          </div>
          
        </div><!--/row-->
        
          <div class="row-fluid">
            <div class="span2">
            
          
<!-- Author: Amina Kadry this form is used for the user to choose that he is attending the event-->  
  <form name = "input" action = "/joinEvent/" method = "POST">
<button type="submit" value="submit" >Attending</button>
</form>
<!-- Author: Amina Kadry this form is used for the user to choose that he is maybe attending the event-->  
  <form name = "input" action = "/maybeAttend/" method = "POST">
<button type ="submit" value = "submit">Maybe Attending</button>
</form>

<!-- Author: Amina Kadry this form is used for the user to choose that he is not attending the event-->
<form name = "input" action = "/notAttend/" method = "POST">
<button type ="submit" value = "submit">Not Attending</button>
</form>

				
            </div><!--/span-->
            <div class="span2">
            
            </div><!--/span-->
            <div class="span2">
            <h2> Event Statistics</h2>
             	<!-- Author: Ahmed Hashad
		This block conatins a table that displays the statistics related to the event's attendings. As it displays the number of:
			Attendees
			Maybe Attending
			Not Attending
			Paid Attendees
			Unique visitors to the event page
			Total visitors to the event page
-->
        
        <table border="2">
            <tr>{% if attending %}
                <th>Number of Attendees:</th> <td>{{ attending }}</td> 
                {% else %}
                <th>Number of Attendees:</th> <td> 0 </td> 
                {% endif %}
                <th> <a href = "/allAttend/" > See All</a>
                </th>
            </tr>
            
            <tr>{% if maybeAttending %}
                <th>	Number of Maybe Attending:</th> <td> {{ maybeAttending }} </td>
                {% else %}
                <th>	Number of Maybe Attending:</th> <td> 0 </td>
                {% endif %}
                <th><a href = "/allMaybe/"> See All </a>
                </th>
            </tr>
            
            
            <tr>{% if notAttending %}
                <th>	Number of Not Attending:</th> <td> {{ notAttending }} </td> 
                {% else %}
                <th>	Number of Not Attending:</th> <td> 0 </td>
                {% endif %}
                <th><a href = "/allNotAttending/" >See All</a>
                </th>
            </tr>
            
            <tr>{% if payedAttendees %}
                <th>	Number of payed Attendees:</th> <td> {{ payedAttendees }} </td> 
                {% else %}
                <th>	Number of payed Attendees: </th> <td> 0 </td>
                {% endif %}
                <th><a href = "/allPayedAttendees/">See All</a>
                </th>
            </tr>
            
            <tr> <th> Number of Viewes: </th> <td> {{pageCounter}} </td> </tr>
            <tr><th> Number of Unique Visits: </th><td> {{viewerCount}}</td></tr>
        </table>
            </div><!--/span-->
         
          
            <div class="span2">
              <br>
              <br>
              <br>
              
			<!-- Author: Dalia Hegazy 
					the following form has two buttons:-
					1) Share Button : which is used by the creator to share this event
					2) Like Button : which is used by the creator to like this event and to unlike it if he is already liked it before 
			 -->
			<form name="social_form" method="post">{% csrf_token %}
			   <input type="submit" value="Share Event" onclick="social_form.action='/EventPage/{{event.id}}/share/'; return true" />
			   </br>
			   {% if oldLike.count = 0 %}
			   <input type="submit" value="Like Event" onclick="social_form.action='/EventPage/{{event.id}}/like/{{user.id}}/'; return true" />
			   {% else %}
			   <input type="submit" value="UnLike Event" onclick="social_form.action='/EventPage/{{event.id}}/like/{{user.id}}/'; return true" />
			   {% endif %}
			</form>

			<form name = "input" action= "/Start/" method = "POST">
			<a href = "/Payment/"></a><button>Pay</button></a>
			</form>
			
      <a href="/SuggestComponent/">Suggest Component</a>

            </div><!--/span-->
          </div><!--/row-->
        </div><!--/span-->
     

      <hr>

      <footer>
     
		<a href="/ViewInstructions/">Instructions</a>
				<a href  ="/Terms&Conditions/">  Terms & Conditions</a>
				<a href  ="/News/">  Latest News and Updates</a>
				<a href ="/Faqs/"> FAQS</a>
				<a href ="/Contactus/"> Contactus</a>
				<p class="pull-right"><a href="#">Back to top</a></p>

				        <p>&copy; Company 2012</p>
      </footer>

    </div><!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>
